<template>
  <div id="testResult">
    <div class="testResultCon" v-if="testResultData.length">
      <h2 class="title">
        {{$route.query.Time_Check|filterDate}}
        <span>&nbsp;</span>
        <span class="blue">{{$route.query.reportName}}</span>
      </h2>
      <div class="thead">
        <table class="table">
          <thead>
            <tr>
              <th class="text-center" width="30%">项目名称</th>
              <th class="text-center" width="15%">结果</th>
              <th class="text-center" width="15%">单位</th>
              <th class="text-center" width="20%">参考值</th>
              <th class="text-center" width="10%">操作</th>
            </tr>
          </thead>
        </table>
      </div>
      <div class="tbody">
        <table class="table table-striped">
          <tbody>
            <tr v-for="item in testResultData" :data-name="item.Name" @click="routeLink($event)">
              <td class="text-center" width="30%">{{item.Name}}</td>
              <td
                :class="['text-center',{'red': item.ABNORMAL_INDICATOR != ' '}]"
                width="15%"
              >{{item.Value}}&nbsp;{{item.ABNORMAL_INDICATOR}}</td>
              <td class="text-center" width="15%">{{item.Unit}}</td>
              <td class="text-center" width="20%">{{item.REFERENCE}}</td>
              <td class="text-center" width="10%">
                <a
                  href="javascript:void(0)"
                  @click="addList($event)"
                  class="athm-btn--mini"
                  :data-name="item.Name"
                >+对比</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <loading v-if="!testResultData.length && isShow"></loading>
    <noSearch v-if="!testResultData.length && !isShow"></noSearch>
  </div>
</template>
<script>
import { apiInspectionDetails } from "@/api/api";
import loading from "@/components/loading/loading";
import noSearch from "@/components/search/noSearch"; //导入没有搜索结果组件
export default {
  data() {
    return {
      testResultData: [],
      isShow: true
    };
  },
  activated() {
    this.getInspectionDetails();
  },
  methods: {
    getInspectionDetails() {
      this.testResultData = [];
      let type = "";
      if (this.$route.query.reportName == "血气") {
        type = "血气";
      } else {
        type = this.$route.query.ReportPage;
      }
      apiInspectionDetails({
        InspectionReportID: this.$route.query.idReport,
        type: type,
        ReoprtDate: this.$route.query.Time_Check.replace("T", " ").substring(
          0,
          10
        )
      })
        .then(res => {
          if (JSON.parse(res).Status == 1) {
            if (JSON.parse(res).Data.length != 0) {
              console.log(JSON.parse(res).Data);
              this.isShow = true;
              this.testResultData = JSON.parse(res).Data;
            } else {
              this.testResultData = [];
              this.isShow = false;
            }
            //console.log(this.testResultData)
          } else {
            this.testResultData = [];
            this.isShow = false;
          }
        })
        .catch(err => {
          this.$toast.center("当前请求接口有问题，请联系管理员！！");
        });
    },
    routeLink(e) {
      let itemID = e.currentTarget.getAttribute("data-name");
      let idReport = this.$route.query.idReport;
      let reportName = this.$route.query.reportName;
      this.$router.push({
        path: "/reportpage/reportIndexItem",
        query: {
          item: 4,
          itemID: itemID,
          back: 1,
          idReport: idReport,
          reportName: reportName
        }
      });
    },
    addList(e) {
      e.stopPropagation(); //阻止事件冒泡
      this.$store.state.flags = true;
      this.$store.state.comparedData.isShow = true;
      this.$store.state.comparedData.isBtnClick = true;
      let list = e.currentTarget.getAttribute("data-name");
      if (this.$store.getters.indexList.length == 6) {
        this.$toast.center("指标对比最多只能6个，请删除一个在添加");
      } else {
        if ($.inArray(list, this.$store.state.indexList) == -1) {
          this.$store.state.indexList.push(list);
        } else {
          this.$toast.center("该指标已添加，请重新选择");
        }
      }
    }
  },
  filters: {
    filterDate(time) {
      if (!time) {
        return time;
      } else {
        return time.replace(/T/g, "-").substring(0, 10);
      }
    }
  },
  components: {
    loading,
    noSearch
  }
};
</script>
<style scoped>
#testResult {
  padding: 35px 50px 10px;
}
.testResultCon {
  height: 100%;
  width: 100%;
}

.title {
  font-size: 18px;
  color: #000;
}
.blue {
  color: #11a7f3;
}
.title span {
  margin-right: 15px;
}
.table > thead > tr > th {
  border-bottom: none;
}
.thead {
  margin-top: 20px;
}
.thead,
.tbody {
  width: 100%;
  /*border:1px solid #f4f4f4;*/
  border-top: none;
}
.tbody tbody tr td.red {
  color: red;
}
.table {
  margin-bottom: 0;
}
.athm-btn--mini {
  color: #386ed3;
  background-color: #fff;
  border: 1px solid #386ed3;
  min-height: 24px;
  font-size: 14px;
  line-height: 22px;
  padding: 5px 10px;
  border-radius: 2px;
}
.thead thead tr {
  height: 42px;
  line-height: 42px;
  background-color: #11a7f3;
  color: #fff;
}

.thead > thead > tr > th {
  border-bottom: none;
}

.tbody {
  max-height: calc(100vh - 275px);
  overflow-y: auto;
  border: 1px solid #ddd;
}

.tbody tbody tr td {
  padding: 8px 0;
  vertical-align: middle;
  border-top: 1px solid #ddd;
  color: #333;
  border-right: 1px solid #ddd;
}
.tbody tbody tr td:last-child {
  border-right: none;
}
.tbody tbody > tr:first-child > td {
  border-top: none;
}
@media screen and (max-width: 768px) {
  .testResultCon {
    min-width: 540px;
  }
  #testResult {
  padding: 35px 30px 10px;
  overflow-y: auto;
}
}
@media screen and (max-width: 425px) {
}
</style>
